<!DOCTYPE html> 
<html lang="en"> 
	<head>
	<meta charset="UTF-8"> 
	<meta content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title> 
	<script src="https://www.jb51.net/article/vue.js">
		
	</script>
	</head>
	<body> 
		<div id="app"> 
			<table rules="rows" frame="hsides" bordercolor="black"> 
				<tr v-for="book in books " text-align="center"> 
					<th>序号：</th> <td>{{book.id}}</td> 
					<th>书名：</th> <td>{{book.name}}</td>
					<th>作者：</th> <td>{{book.author}}</td>
					<th>价格：</th> <td>{{book.price}}</td>
					<td>
						<button type="button" @click="delBook(book)">删除</button>
					</td> 
				</tr>
			</table> 
			<br> 
				<div> 
					<legend>添加书籍</legend>
					<br> 
					<div>
						<label for="">书名</label> 
						<input type="text" v-model="book.name">
					</div> 
					<div> <label for="">作者</label> 
						<input type="text" v-model="book.author"> 
					</div> 
					<div> 
						<label for="">价格</label> 
						<input type="text" v-model="book.price"> 
					</div>
					<br> 
					<button v-on:click="addBook()">添加</button> 
				</div> 
		</div> 
		<script src="./js/jquery.slim.min.js"></script>
		<script src="./js/popper.min.js"></script>
		<script src="./js/bootstrap.min.js"></script>
		<script src="./layer/layer.js"></script>
		<script src="./js/sweetalert2.all.min.js"></script>
		<script src="./js/axios.min.js"></script>
		<script src="./js/vue.min.js"></script>
		<script src="./js/request.js"></script>
		<script> 
			var vm = new Vue({ 
				el: '#app',
				data: {
					book: {
						id: 0, 
						author: '',
						name: '',
						price: '' 
					},
					books: [
							{ id: 1, author: '曹雪芹', name: '红楼梦', price: 32.0 },
							{ id: 2, author: '施耐庵', name: '水浒传', price: 30.0 },
							{ id: 3, author: '罗贯中', name: '三国演义', price: 24.0 }, 
							{ id: 4, author: '吴承恩', name: '西游记', price: 20.0 }
						]
				},
				methods: { 
					addBook: function() {
						//计算书的id 
						this.book.id = this.books.length + 1; 
						this.books.push(this.book); //将input中的数据重置 
						this.book = {}; 
					}, 
					delBook: function(book) { 
						this.books.splice(this.books.indexOf(book),1); }
					}
				})
			</script> 
	</body>
</html>